<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';

const tableData = ref([])
const company = ref({
  id: 0,
  name: '',
  address: '',
  telephone: '',
  simplyIntroduce: '',
  email: '',
  code: '',
  img: ''
})
const saveOrUpdateVisible = ref(false);
const saveOrUpdateTitle = ref('添加');

// 去修改的页面
const toEdit = row => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '编辑';
  company.value = row;
}

// 去添加的页面
const toAdd = row => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '添加';
  company.value = {
    id: 0,
    name: '',
    address: '',
    telephone: '',
    simplyIntroduce: '',
    email: '',
    code: '',
    img: ''
  }
}

// 取消修改或保存
const close = () => {
  saveOrUpdateVisible.value = false;
  company.value = {
    id: 0,
    name: '',
    address: '',
    telephone: '',
    simplyIntroduce: '',
    email: '',
    code: '',
    img: 'https://ts3.tc.mm.bing.net/th?id=OIP-C.E6m4s0dlHQhce_kPus5WJAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
  }
}

// 保存或更新
const saveOrUpdate = () => {
  if (saveOrUpdateTitle.value == '添加') {
    // 调用后端接口添加
    axios.post('/company/add', company.value)
     .then(resp => {
        let result = resp.data;
        if (result.code == 1) {
          getList();
          ElMessage({
            message: '添加成功！',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '添加失败！',
            type: 'warning',
          })
        }
      })
  } else {
    // 调用后端接口修改
    axios.put('/company/update', company.value)
     .then(resp => {
        let result = resp.data;
        if (result.code == 1) {
          getList();
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '修改失败！',
            type: 'warning',
          })
        }
      })
  }
  // 关闭弹框
  saveOrUpdateVisible.value = false;
  company.value = {
    id: 0,
    name: '',
    address: '',
    telephone: '',
    simplyIntroduce: '',
    email: '',
    code: '',
    img: ''
  }
}

// 定义一个方法当页面加载后立马执行的代码
onMounted(() => {
  getList();
})
// 定义一个全局的查询参数变量
const queryInfo = ref({
  pageNum: 1,
  pageSize: 5,
})
// 定义一个数据总条数
const total = ref(0);

// 定义一个方法，来动态的调用后端接口，获取公司列表
const getList = () => {
  // 这里假设后端有获取列表的接口，如 /company/list ，如果没有需要和后端沟通添加
  axios.get('/company/select', {
    params: queryInfo.value
  })
   .then(resp => {
      let result = resp.data;
      if (result.code == 1) {
        total.value = result.data.total;
        tableData.value = result.data.list;
      } else {
        console.log('获取列表失败')
      }
    })
}

// 分页
const handleSizeChange = (val) => {
  queryInfo.value.pageSize = val;
  queryInfo.value.pageNum = 1;
  getList();
}
const handleCurrentChange = (val) => {
  queryInfo.value.pageNum = val;
  getList();
}

// 单个删除
const toDel = id => {
  ElMessageBox.confirm(
    '真的要删除吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
   .then(() => {
      // 调用后端接口删除
      axios.delete(`/company/delete/${id}`)
       .then(resp => {
          let result = resp.data;
          if (result.code == 1) {
            getList();
            ElMessage({
              message: '删除成功！',
              type: 'success',
            })
          } else {
            ElMessage({
              message: '删除失败！',
              type: 'warning',
            })
          }
        })
    })
   .catch(() => { })
}

// 批量删除（新增方法，可根据实际需求选择是否保留）
const handleDeleteSelected = () => {
  const selectedRows = tableData.value.filter(row => row.__selected);
  if (selectedRows.length === 0) {
    ElMessage.warning('请选择要删除的公司');
    return;
  }
  ElMessageBox.confirm(
    '真的要删除选中的公司吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
   .then(() => {
      const ids = selectedRows.map(row => row.id);
      axios.post('/company/deleteBatch', { ids })
       .then(resp => {
          let result = resp.data;
          if (result.code == 1) {
            getList();
            ElMessage({
              message: '批量删除成功！',
              type: 'success',
            })
          } else {
            ElMessage({
              message: '批量删除失败！',
              type: 'warning',
            })
          }
        })
    })
   .catch(() => { })
}

</script>

<template>
   <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
    <el-form-item label="公司名">
      <el-input v-model="queryInfo.name" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getList">搜索</el-button>
    </el-form-item>
  </el-form>
  <div>
    <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
    <el-button type="danger" icon="Delete" plain @click="handleDeleteSelected">删除</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column prop="companyId" label="编号" width="80" />
    <el-table-column prop="companyName" label="公司名" width="100" />
    <el-table-column prop="companyAddress" label="地址" width="150" show-overflow-tooltip />
    <el-table-column prop="companyTelephone" label="电话" width="120" />
    <el-table-column prop="companySimplyintroduce" label="简介" width="200" show-overflow-tooltip />
    <el-table-column prop="companyEmail" label="邮箱" width="150" />
    <el-table-column prop="companyImg" label="二维码" width="150" />
    <el-table-column prop="companyImg" label="图片" width="150">
      <template #default="scope">
        <img :src="scope.row.img" alt="" style="width: 50px; height: 50px;">
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" @click="toEdit(scope.row)">
          修改
        </el-button>
        <el-button size="small" type="danger" @click="toDel(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
    :page-sizes="[1, 5, 10, 20]" :size="size" layout="total, sizes, prev, pager, next, jumper" :total="total"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  <!-- 添加修改 对话框 -->
  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
    <el-form :model="company">
      <el-form-item label="公司名" :label-width="formLabelWidth">
        <el-input v-model="company.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input v-model="company.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="company.telephone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="简介" :label-width="formLabelWidth">
        <el-input v-model="company.simplyIntroduce" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="company.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="二维码" :label-width="formLabelWidth">
        <el-input v-model="company.code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-input v-model="company.img" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
 
 
</template>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>